// 2. 有状态组件
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 状态
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Column组件',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        backgroundColor: Colors.purple,
      ),
      // 1. ListView 默认构造函数
      // body: ListView(
      //   scrollDirection: Axis.vertical,
      //   children: [
      //     Container(
      //       height: 80,
      //       color: Colors.blue,
      //       alignment: Alignment.centerLeft,
      //       child: const Text('鸿蒙大事件1'),
      //     ),
      //     Container(
      //       height: 90,
      //       color: Colors.pink,
      //       alignment: Alignment.centerLeft,
      //       child: const Text('鸿蒙大事件2'),
      //     ),
      //     Container(
      //       height: 100,
      //       color: Colors.teal,
      //       alignment: Alignment.centerLeft,
      //       child: const Text('鸿蒙大事件3'),
      //     ),
      //     Container(
      //       height: 110,
      //       color: Colors.green,
      //       alignment: Alignment.centerLeft,
      //       child: const Text('鸿蒙大事件4'),
      //     ),
      //     Container(
      //       height: 120,
      //       color: Colors.cyan,
      //       alignment: Alignment.centerLeft,
      //       child: const Text('鸿蒙大事件5'),
      //     ),
      //     Container(
      //       height: 130,
      //       color: Colors.orange,
      //       alignment: Alignment.centerLeft,
      //       child: const Text('鸿蒙大事件6'),
      //     ),
      //     Container(
      //       height: 140,
      //       color: Colors.blue,
      //       alignment: Alignment.centerLeft,
      //       child: const Text('鸿蒙大事件7'),
      //     ),
      //     Container(
      //       height: 150,
      //       color: Colors.green,
      //       alignment: Alignment.centerLeft,
      //       child: const Text('鸿蒙大事件8'),
      //     ),
      //     Container(
      //       height: 160,
      //       color: Colors.red,
      //       alignment: Alignment.centerLeft,
      //       child: const Text('鸿蒙大事件9'),
      //     ),
      //   ],
      // ),
      // 2. ListView builder 构造函数
      // body: ListView.builder(
      //   itemBuilder: (context, index) {
      //     return Container(
      //       padding: const EdgeInsets.all(10),
      //       child: Row(
      //         children: [
      //           Image.network(
      //             'https://yanxuan-item.nosdn.127.net/e529b6ab111ade9da9314867f98d360f.png',
      //             width: 90,
      //           ),
      //           const Expanded(
      //               child: Text(
      //             '海尔（Haier）波轮洗衣机全自动家用 10公斤大容量 直驱变频 一级能效 高效精华洗 以旧换新EB100B37Mate5',
      //             maxLines: 2,
      //             overflow: TextOverflow.ellipsis,
      //           )),
      //           const Padding(
      //             padding: EdgeInsets.only(left: 10),
      //             child: Icon(Icons.access_time_filled),
      //           )
      //         ],
      //       ),
      //     );
      //   },
      //   itemCount: 10,
      // ),
      // 3. ListView separated 构造函数
      body: ListView.separated(
        // 构造每一项的函数
        itemBuilder: (context, index) {
          return Container(
            padding: const EdgeInsets.all(10),
            child: Row(
              children: [
                Image.network(
                  'https://yanxuan-item.nosdn.127.net/e529b6ab111ade9da9314867f98d360f.png',
                  width: 90,
                ),
                const Expanded(
                    child: Text(
                  '海尔（Haier）波轮洗衣机全自动家用 10公斤大容量 直驱变频 一级能效 高效精华洗 以旧换新EB100B37Mate5',
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                )),
                const Padding(
                  padding: EdgeInsets.only(left: 10),
                  child: Icon(Icons.access_time_filled),
                )
              ],
            ),
          );
        },
        // 构造分割线的函数
        separatorBuilder: (context, index) {
          return Container(
            height: 1,
            color: Colors.grey,
            margin: const EdgeInsets.symmetric(horizontal: 10),
          );
        },
        // 列表的长度
        itemCount: 10,
      ),
    );
  }
}
